<template>
    <div>
        <p>父组件</p>
        <!-- 实现一个动态切换组件 -->
        <!-- 实现一个选项卡功能 -->
        <p class="nav">
            <span @click="changeTabFn('Son1')" :class="componentName == 'Son1' ? 'active' : ''">未完成的订单</span>
            <span @click="changeTabFn('Son2')" :class="componentName == 'Son2' ? 'active' : ''">审核中的订单</span>
            <span @click="changeTabFn('Son3')" :class="componentName == 'Son3' ? 'active' : ''">已完成的订单</span>
        </p>
        <!-- 显示对应的组件 -->
        <KeepAlive>
            <component :is="componentName"></component>
        </KeepAlive>
    </div>
</template>

<script>
// 动态组件:
// 语法:  <component is="组件名"></component>
// 组件名就是对应要显示的哪一个组件,要显示的组件最终替换掉了component 占位的部分

// 用法: 一般常用语选项卡功能,用来切换组件

// 动态组件可以额结合KeepAlive这个内置组件一起使用, 用来缓存组件..
// 避免组件的重复的创建和卸载,消耗浏览器性能

// KeepAlive 是一个性能优化的内置组件
// 被 KeepAlive 缓存的组件额外多了两个生命周期 activeted  deactivated
// activeted 激活时触发, 显示组件的时候出发
// deactivated 失活 表示离开组件的时候出发

// 注意: 被KeepAlive包括的组件 created 和 ummounted 生命周期的执行情况
// created 只有在第一次加载组件的时候执行
// ummounted 永远不会执行

import Son1 from './Son1.vue';
import Son2 from './Son2.vue';
import Son3 from './Son3.vue';
export default {
    data() {
        return {
            componentName: 'Son1'
        }
    },
    components: {
        Son1,
        Son2,
        Son3
    },
    methods: {
        changeTabFn(name) {
            this.componentName = name

        }
    }
}
</script>
<style scoped>
.nav span {
    margin: 0 10px;
}

.active {
    background-color: red;
}
</style>